<template>
	<view>
		<view clsss="wrap">
			<view class="inner">
				<view class="item" v-for="item in mobileList" :key="item" style="margin-left: 90rpx">
					{{ item }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			mobileList: [
				'177***  1分钟前  领取成功',
				'138***  1分钟前  领取成功',
				'181***  1分钟前  领取成功',
				'139***  1分钟前  领取成功',
				'177***  1分钟前  领取成功',
				'138***  1分钟前  领取成功',
				'181***  1分钟前  领取成功',
				'139***  1分钟前  领取成功'
			]
		};
	}
};
</script>

<style lang="scss" scoped>
.wrap {
	overflow: hidden;
	position: relative;
	/* width: 800rpx; */
	height: 58rpx;
	white-space: nowrap;
	background-color: white;
}

.inner {
	position: absolute;
	animation: slide 5s linear infinite;
	display: flex;
}

.item {
	display: inline-block;
	text-align: center;
	box-sizing: border-box;
	margin-left: 30rpx;

	width: 278rpx;
	height: 54rpx;
	line-height: 54rpx;

	border-radius: 27rpx;

	font-family: PingFang SC;
	font-weight: 500;
	font-size: 24rpx;
	color: #e54966;
	background-color: white;
}

@keyframes slide {
	0% {
		transform: translateX(0);
	}

	100% {
		transform: translateX(-25%);
	}
}
</style>